<template>
  <div class="table-page-search-wrapper commonSelectWidth">
    <a-form>
      <a-row :gutter="16">
        <!-- 任务 -->
        <a-col :md="8" :sm="24">
          <a-form-item :colon="false">
            <part-soft-select
              mode="multiple"
              :default-value="queryParams.ecuIds"
              :query="partSoftQuery"
              :hasAll="false"
              @changeoption="changeOption($event,'ecuIds')"
            ></part-soft-select>
          </a-form-item>
        </a-col>
        <!-- 车型 -->
        <a-col :md="4" :sm="24">
          <a-form-item :colon="false">
            <car-model-select
              mode="multiple"
              :query="carModelQuery"
              :has-all="false"
              :default-value="queryParams.modelIds"
              @changeoption="changeOption($event, 'modelIds')"
            ></car-model-select>
          </a-form-item>
        </a-col>
        <!-- 制造商 -->
        <a-col :md="3" :sm="24">
          <a-form-item :colon="false">
            <supplier-select
              mode="multiple"
              :query="supplierQuery"
              :default-value="queryParams.suppliers"
              @changeoption="changeOption($event, 'suppliers')"
            ></supplier-select>
          </a-form-item>
        </a-col>
        <a-col :md="4" :sm="24">
          <a-form-item :colon="false">
            <a-button @click="doAction('searchData')" style="margin-right:10px;">
              <i class="iconfont icon-chazhao"></i>
              {{ $t('inquiry') }}
            </a-button>
            <a-button
              type="primary"
              :loading="exporting"
              @click="exportStatisticsEcu"
            >
              <i class="iconfont icon-xiazai"></i>
              {{ $t('export') }}
            </a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
import SupplierSelect from '@/views/components/SupplierSelect.vue'
import PartSoftSelect from '@/views/components/PartSoftSelect'
import CarModelSelect from '@/views/components/CarModelSelect.vue'
export default {
  components: {
    PartSoftSelect,
    CarModelSelect,
    SupplierSelect
  },
  data () {
    return {
      exporting: false
    }
  },
  computed: {
    ...mapGetters(['myActiveProjectId']),
    ...mapState({
      queryParams: (state) => state.statisticsVehicle.queryParams
    }),
    defaultProjectId () {
      // eslint-disable-next-line max-len
      return (this.queryParams.projectIds.length && this.queryParams.projectIds) || (this.myActiveProjectId && [this.myActiveProjectId]) || []
    },
    supplierQuery () {
      return {
        projectIds: this.defaultProjectId
      }
    },
    carModelQuery () {
      return {
        projectIds: this.defaultProjectId
      }
    },
    partSoftQuery () {
      return {
        projectIds: this.defaultProjectId
      }
    }
  },
  methods: {
    changeOption (val, key) {
      this.queryParams[key] = val
    },
    doAction (action) {
      this.$emit('clickbtn', { type: action })
    },
    // 导出
    exportStatisticsEcu () {
      this.exporting = true
      // taskApi.exportTaskCars({ taskId: taskInfo.id, type: 1 }).then(res => {
      //   downloadBlobFile(res, taskInfo.name + this.$t('selectedVehicle') + '.xlsx')
      // }).finally(() => {
      //   this.exporting = false
      // })
    }
  }
}
</script>
<style lang="less">

</style>
